<template>
	<view class="preViewLayOut" >
		<swiper>
			<swiper-item>
				<image @click="showMask=!showMask" src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../common/images/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="onAction" v-show="showMask"> 
			<button class="goBack">
				<uni-icons type="back" size="20" color="white"></uni-icons>
			</button>
			
			<view class="currentPicPage">
				<view class="pageNum">
					<text>7</text><text>/</text><text>12</text>
				</view>
			</view>
			
			<view class="time">
				 {{h}}:{{m}}
			</view>
			
			<view class="date">
				<text>{{M}}</text>
				<text>月</text> 
				<text>{{D}}</text>
				<text>日</text> 
			</view>
			
			<view class="footer">
				<view class="feature">
					<view class="box" @click="picInfoShow = true">
						<uni-icons type="info" size="30"></uni-icons>
						信息
					</view>
					<view class="box">
						<uni-icons type="star" size="30"></uni-icons>
						5分
					</view>
					<view class="box">
						<uni-icons type="download" size="30"></uni-icons>
						下载
					</view>
				</view>
			</view>
		</view>
		
		<view class="picInfo" v-show="picInfoShow">
			<view class="infoTitle">
				壁纸信息
			</view>
			<view class="picId">
				壁纸ID：65656565656556565656
			</view>
			<view class="picAuthor">
				发布者：举个路子
			</view>
			<view class="picScore">
				评分：
			</view>
			<view class="picMeta">
				摘要：
			</view>
			<view class="picTag">
				标签：
			</view>
			<view class="picNotice">
				声明：
			</view>
			<button @click="picInfoShow = false">
				<uni-icons type="closeempty" size="30"></uni-icons>
			</button>
		</view>


	</view>
</template>

<script setup>
import {ref} from 'vue'
const showMask = ref(true)
const picInfoShow = ref(false)
//获取年月日时分数据
const dateM = new Date()
const h = dateM.getHours()
const m = dateM.getMinutes()
const M = dateM.getMonth() + 1
const D = dateM.getDate()
</script>

<style lang="scss" scoped>
	.preViewLayOut {
		width: 750rpx;
		position: relative;
		color: white;

		swiper {
			width: 100%;
			height: 100vh;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.onAction {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.goBack{
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
				@include flexCenter();
				background-color: rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(20rpx);
				position: absolute;
				left: 30rpx;
				top: 5vh;
			}
			.currentPicPage{
				position: absolute;
				top: 10vh;
				width: 100%;
				height: 40rpx;
				@include flexCenter();
				.pageNum{
					width: fit-content;
					height: 100%;
					@include flexCenter();
					// border: 1px solid black;
					font-size: 20rpx;
					background-color: rgba(0, 0, 0, 0.3);
					backdrop-filter: blur(15rpx);
					border-radius: 20rpx;
					padding: 0 25rpx;
					
				}
				
			}
			.time{
				height: 110rpx;
				font-size: 110rpx;
				@include flexCenter();
				position: absolute;
				top: calc(10vh + 80rpx);
				left: 0;
				right: 0;
				font-weight: bold;
			}
			.date{
				height: 30rpx;
				font-size: 30rpx;
				@include flexCenter();
				position: absolute;
				top: calc(10vh + 240rpx);
				left: 0;
				right: 0;
				
			}
			.footer{
				height: 120rpx;
				position: absolute;
				bottom: 10vh;
				left: 0;
				right: 0;
				@include flexCenter();
				
				.feature{
					background-color: #fff;
					width: fit-content;
					@include flexCenter();
					height: 100%;
					padding: 0 80rpx;
					border-radius: 60rpx;
					box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.8);
					backdrop-filter: blur(20rpx);
				}
				.box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 25rpx;
					height: 100%;
					color: #5e564f;
					margin-right: 120rpx;
					&:nth-last-of-type(1){
						margin-right: 0;
					}
				}
			}
		}
		.picInfo{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			color: black;
		}
	}
</style>